<template>
    <div class="step-comp">
        <el-row class="step-item" :gutter="20">
            <el-col :span="10">
                <div class="upload-step-img">
                    <form action class="upload-form" method="post" enctype="multipart/form-data" ref="uploadFormMulti">
                        <input
                                @change="uploadImg"
                                class="file-input"
                                type="file"
                                name="file"
                                accept="image/jpg, image/jpeg, image/png, image/gif"/>
                    </form>
                    <img v-if="step.picture.src != undefined" :src="step.picture.src"
                         alt="">
                    <i class="el-icon-plus" style="font-size: 50px;color: #909399;" v-else></i>
                </div>
            </el-col>
            <el-col :span="10">
                <div class="step-desc">
                    <el-input
                            type="textarea"
                            placeholder="请输入步骤说明"
                            maxlength="500"
                            minlength="0"
                            resize="none"
                            show-word-limit
                            v-model="step.desc">
                    </el-input>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="func-list">
                    <div class="func-item" @click="deleteStep">
                        <span class="icon"><i class="el-icon-close"></i></span>
                        <span>删除本步</span>
                    </div>

                    <div class="func-item" @click="moveTop">
                        <span class="icon"><i class="el-icon-top"></i></span>
                        <span>上移一步</span>
                    </div>

                    <div class="func-item" @click="moveBottom">
                        <span class="icon"><i class="el-icon-bottom"></i></span>
                        <span>下移一步</span>
                    </div>

                    <div class="func-item" @click="addStep">
                        <span class="icon"><i class="el-icon-plus"></i></span>
                        <span>添加一步</span>
                    </div>

                </div>
            </el-col>
        </el-row>


    </div>
</template>

<script>
    import {uploadImg} from "@/api/business/file"

    export default {
        name: 'Step',
        data() {
            return {
                src: ""
            };
        },
        props: {
            step: {
                type: Object,
                default: () => {
                    return {
                        index: 1,
                        desc: "",
                        picture: {
                            picId: -1,
                            userId: -1,
                            src: "",
                            alt: ""
                        }
                    }
                }
            }
        },
        methods: {
            deleteStep() {
                this.$emit("deleteStep", this.step)
            },
            moveTop() {
                this.$emit("moveTop", this.step)
            },
            moveBottom() {
                this.$emit("moveBottom", this.step)
            },
            addStep() {
                this.$emit("addStep", this.step)
            },
            async uploadImg() {
                let _this = this
                //构造formData对象
                let form = this.$refs.uploadFormMulti
                let file = form[0].files[0]
                let formData = new FormData()
                formData.append("file", file)
                uploadImg(formData).then(res => {
                    _this.step.picture = res.data
                    _this.src = res.data.src
                })
            }
        },
        mounted() {
        },
        components: {}
    }
</script>

<style scoped lang='less'>
    .step-comp {
        .step-item {
            height: 250px;
            margin-bottom: 20px;

            .func-list {
                .func-item:hover {
                    border-color: #606266;;

                    > span {
                        color: #606266;
                    }
                }

                .func-item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                    padding: 5px 10px;
                    border: 1px solid #DCDFE6;
                    cursor: pointer;

                    > span.icon {
                        margin-right: 5px;
                    }

                    > span {
                        font-size: 13px;
                        color: #909399;
                    }
                }
            }

            .step-desc {
                display: flex;
                align-items: center;
                justify-content: center;

                /deep/ .el-textarea__inner {
                    height: 249px;
                }
            }

            .upload-step-img {
                height: 250px;
                position: relative;
                background-color: white;
                text-align: center;
                overflow: hidden;
                border: 1px solid #DCDFE6;
                line-height: 246px;

                > img {
                    display: inline-block;
                    max-height: 100%;
                    max-width: 100%;
                    min-height: 100px;
                    min-width: 100px;
                    vertical-align: middle;
                }

                .upload-form {
                    > input {
                        cursor: pointer;
                        position: absolute;
                        height: 100%;
                        width: 100%;
                        right: 0;
                        opacity: 0;
                        z-index: 1;
                    }
                }
            }
        }
    }
</style>